<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>搜索知乎内容-18001010319-方弘轩</title>
    <link rel="stylesheet" href="./comment/iconfont.css">
    <link rel="stylesheet" href="./myicon/iconfont.css">
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <link rel="stylesheet" href="./color-icon.css">
    <style>
        body{
            min-width: 320px;
            padding: 0;
            margin: 0;
        }
        div,span,a,ul,p{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        #father{
            padding: 10px;
            width: 95%;
        }
        #top {
            width: 100%;
            background-color: #ccc;
            border-radius: 4px;
            height: 30px;
            line-height: 30px;
            text-indent: 10px;
        }
        #top a{
            color: cadetblue;
            margin-left: 10px;
        }
        #nav{
            height: 45px;
            line-height: 50px;
            border-bottom: 1px solid #ccc;
            margin: 1px;
        }
        #show{
            font-weight: bold;
            font-size: 20px;
        }
        #show span{
            display: inline-block;
            height: 45px;
            line-height: 55px;
            border-bottom: 1px solid #000;
        }
        #lb {
            display: flex;
            padding-bottom: 5px;
        }
        #lb ul{
            width: 60%;
        }
        #lb ul li{
            display: flex;
        }
        .first{
            flex-wrap: 1;
            width: 30px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            
        }
        .second{
            flex-wrap: 4;
        }
        .second p:nth-child(1){
            font-size: 16px;
            margin: 3px;
        }
        .second p:nth-child(2){
            color: cadetblue;
            font-size: 14px;
        }
        #gd{
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }
        .tp{
            margin-top: 10px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .tp span{
           float: right;
           color: cadetblue;
        }
        .lsnr{
            margin-top: 5px;
            border-bottom: 1px solid #ccc;
            height: 25px;
            line-height: 20px;
        }
        .lsnr span:nth-child(1){
            margin-bottom: 5px;
            color: cadetblue;
        }
        .lsnr span:nth-child(2){
            font-size: 15px;
            color: cadetblue;
            font-weight: bold;
        }
        .lsnr span:nth-child(3){
            float: right;    
            font-size: 25px;
            color: cadetblue;
            line-height: 15px;
        }
        .lsnr:last-child{
            border: none;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="top">
        <span class="iconfont icon-jiantou-copy"></span>
        <a href="#">搜索知乎内容</a>
    </div>

    <div class="swiper-container" id="nav">
        <div class="swiper-wrapper">
          <div class="swiper-slide" id="show"><span>热搜</span></div>
          <div class="swiper-slide"><span>推荐</span></div>
          <div class="swiper-slide"><span>数码</span></div>
          <div class="swiper-slide"><span>影视</span></div>
          <div class="swiper-slide"><span>科学</span></div>
          <div class="swiper-slide"><span>体育</span></div>
          <div class="swiper-slide"><span>游戏</span></div>
          <div class="swiper-slide"><span>百科</span></div>
          <div class="swiper-slide"><span>财经</span></div>
          <div class="swiper-slide"><span>大学</span></div>
        </div>
    </div>

    <div id="lb">
        <ul>
            <li>
                <div class="first">1</div>
                <div class="second">
                    <p>阿道夫哈拉省的</p>
                    <p>一赛若干个</p>
                </div>                
            </li>
            <li>
                <div class="first">3</div>
                <div class="second">
                    <p>阿道夫哈拉省的</p>
                    <p>一赛若干个</p>
                </div>                
            </li><li>
                <div class="first">5</div>
                <div class="second">
                    <p>阿道夫哈拉省的</p>
                    <p>一赛若干个</p>
                </div>                
            </li><li>
                <div class="first">7</div>
                <div class="second">
                    <p>阿道夫哈拉省的</p>
                    <p>一赛若干个</p>
                </div>                
            </li>
        </ul>
        <ul>
            <li>
                <div class="first">2</div>
                <div class="second">
                    <p>阿道夫哈拉省的</p>
                    <p>一赛若干个</p>
                </div>                
            </li>
            <li>
                <div class="first">4</div>
                <div class="second">
                    <p>阿道夫哈拉省的</p>
                    <p>一赛若干个</p>
                </div>                
            </li><li>
                <div class="first">6</div>
                <div class="second">
                    <p>阿道夫哈拉省的</p>
                    <p>一赛若干个</p>
                </div>                
            </li><li>
                <div class="first">8</div>
                <div class="second">
                    <p>阿道夫哈拉省的</p>
                    <p>一赛若干个</p>
                </div>                
            </li>
        </ul>       
    </div>
    <div id="gd"><a href="#">更多热搜内容 ＞ </a></div>

    <div id="ls">
        <div class="tp">
            搜索历史
            <span class="iconfont icon-lajitong"></span>   
        </div>
        <div class="lsnr">
            <span class="iconfont icon-faxian2"></span>
            <span> &nbsp; 巡回检查组</span>
            <span> × </span>
        </div>
        <div class="lsnr">
            <span class="iconfont icon-faxian2"></span>
            <span> &nbsp; 厂长复出</span>
            <span> × </span>
        </div>
        <div class="lsnr">
            <span class="iconfont icon-faxian2"></span>
            <span> &nbsp; 谷歌崩溃</span>
            <span> × </span>
        </div>
        <div class="lsnr">
            <span class="iconfont icon-faxian2"></span>
            <span> &nbsp; 伊美黎</span>
            <span> × </span>
        </div>
        <div class="lsnr">
            <span class="iconfont icon-faxian2"></span>
            <span> &nbsp; 大连金石滩</span>
            <span> × </span>
        </div>
        <div class="lsnr">
            <span class="iconfont icon-faxian2"></span>
            <span> &nbsp; 知乎首页</span>
            <span> × </span>
        </div>
        <div class="lsnr">
            <span class="iconfont icon-faxian2"></span>
            <span> &nbsp; Git</span>
            <span> × </span>
        </div>
        <div class="lsnr">
            <span class="iconfont icon-faxian2"></span>
            <span> &nbsp; 惠普暗影精灵</span>
            <span> × </span>
        </div>
        <div class="lsnr">
            <span class="iconfont icon-faxian2"></span>
            <span> &nbsp; 巡回检查组</span>
            <span> × </span>
        </div>
        <div class="lsnr">
            <span class="iconfont icon-faxian2"></span>
            <span> &nbsp; 大哥</span>
            <span> × </span>
        </div>
    </div>
</div>




    <script src="./swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper('#nav', {
          slidesPerView: 5,
          spaceBetween: 0,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        });
    </script>
    <script>
        var span=document.querySelectorAll(".swiper-slide");
        console.log(span);

        onnav(span);
        function onnav(span){
            for(var i=0; i<span.length;i++){
                span[i].onclick=function(){
                    for(var j=0; j<span.length;j++){
                        span[j].id="";
                    }
                    this.id="show";
                }
            }
        }
    </script>
</body>
</html>